<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"
	href="<c:url value="/resources/lib/bootstrap-3.3.5/css/bootstrap.min.css"/>" />
	<link href="/resources/lib/font-awesome-4.4.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />

		<link href="/resources/css/header.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="<c:url value="/resources/css/common.css"/>" />
<link rel="stylesheet"
	href="<c:url value="/resources/lib/jsTree/jstree.style.min.css"/>" />
<link rel="stylesheet"
	href="<c:url value="/resources/css/project/operationMapping.css"/>" />

<script src="<c:url value="/resources/lib/jquery-2.1.4.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/bootstrap-3.3.5/js/bootstrap.min.js" />"
	type="text/javascript"></script>
<script src="<c:url value="/resources/lib/angular-1.4.7/angular.js"/>"
	type="text/javascript">
	
</script>

<script src="<c:url value="/resources/lib/jquery-2.1.4.min.js"/>"
	type="text/javascript"></script>

<script src="<c:url value="/resources/lib/jsTree/jstree.min.js"/>"
	type="text/javascript"></script>

<script src="<c:url value="/resources/js/common.js"/>"
	type="text/javascript"></script>

<script
	src="<c:url value="/resources/js/project/operationMapping.js" />"
	type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>operation mapping</title>
</head>
<body ng-app="conversionTool">
<ng-include src="'/resources/viewPart/nav.html'" >
	
	</ng-include>
	<header>
	<div class="head-line">
		<h3 class="head-title">Operation Mapping</h3>
		</div>
	</header>

	<section class="container" ng-controller="operationMappingCtrl">


		<input type="hidden" id="operationId" value="${operation.id}"
			ng-init="operation.id =${operation.id}" />

		<!-- header -->
		<div class="col-xs-12 form-group">
			<div>
				<label>Header</label>
			</div>
				<input type="button" ng-repeat="item in header"
					class="btn btn-primary" value="{{item}}" ng-click="setHeader(item)" />

			
		</div>

		<!-- tree left and right -->
		<div class="col-xs-12">
			<div class="col-xs-6 form-group tree-area">

				<div id="tree"></div>

			</div>

			<div class="col-xs-6">

				<div class="form-group">

					<label>Node Name</label> <input type="text" class="form-control"
						id="nodeName" disabled />
				</div>

				<div class="form-group">

					<label>Node Path</label> <input type="text" class="form-control"
						id="nodePath" disabled />
				</div>

				<div class="form-group">
                  <label>Node Value</label> 
				<input type="text" class="form-control" id="nodeValue" disabled />
				</div>


				<div class="form-group text-right">
					<input type="button" class="btn btn-primary" value="Add Value"
						ng-click="addSetting()" />
				</div>

			</div>

		</div>


		<div class="col-xs-12">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>node path</th>
						<th>value</th>
						<th>delete</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="(k,v) in operation.mapping">
						<th>{{k}}</th>
						<th>{{v}}</th>
						<th>
						<!--  <input type="button" value="delete"
							class="btn btn-default" ng-click="deleteNodeSetting(k)" />-->
							 <button type="button"
							class="btn btn-default btn-border"  ng-click="deleteNodeSetting(k)" >
								<span><i class="glyphicon glyphicon-trash"></i></span>
							</button>
							
						</th>
					</tr>
				</tbody>
			</table>
		</div>



		<div class="col-xs-12 text-right">

			<input type="button" value="Save" class="btn btn-primary"
				ng-click="save()" />
		</div>


		<div class="col-xs-12 text-center form-group">
		<div class="control-group error">
		{{msg}}</div>
		</div>


	</section>


</body>
</html>